/*******************************************************************************
* KindEditor - WYSIWYG HTML Editor for Internet
* Copyright (C) 2006-2011 kindsoft.net
*
* @author Roddy <luolonghao@gmail.com>
* @site http://www.kindsoft.net/
* @licence http://www.kindsoft.net/license.php
*******************************************************************************/

KindEditor.plugin('emoticons',
    function (K) {
        var self = this,
            name = 'emoticons',
            path = (self.emoticonsPath || self.pluginsPath + 'emoticons/images/'),
            allowPreview = self.allowPreviewEmoticons === undefined ? true : self.allowPreviewEmoticons,
            currentPageNum = 1;
        self.clickToolbar(name,
            function () {
                var rows = 5,
                    cols = 9,
                    total = 135,
                    startNum = 0,
                    cells = rows * cols,
                    pages = Math.ceil(total / cells),
                    colsHalf = Math.floor(cols / 2),
                    wrapperDiv = K('<div class="ke-plugin-emoticons"></div>'),
                    elements = [],
                    menu = self.createMenu({
                        name: name,
                        beforeRemove: function () {
                            removeEvent();
                        }
                    });
                menu.div.append(wrapperDiv);
                var previewDiv, previewImg;
                if (allowPreview) {
                    previewDiv = K('<div class="ke-preview"></div>').css('right', 0);
                    previewImg = K('<img class="ke-preview-img" src="' + path + startNum + '.gif" />');
                    wrapperDiv.append(previewDiv);
                    previewDiv.append(previewImg);
                }

                function bindCellEvent(cell, j, num) {
                    if (previewDiv) {
                        cell.mouseover(function () {
                            if (j > colsHalf) {
                                previewDiv.css('left', 0);
                                previewDiv.css('right', '');
                            } else {
                                previewDiv.css('left', '');
                                previewDiv.css('right', 0);
                            }
                            previewImg.attr('src', path + num + '.gif');
                            K(this).addClass('ke-on');
                        });
                    } else {
                        cell.mouseover(function () {
                            K(this).addClass('ke-on');
                        });
                    }
                    cell.mouseout(function () {
                        K(this).removeClass('ke-on');
                    });
                    cell.click(function (e) {
                        self.insertHtml('<img src="' + path + num + '.gif" border="0" alt="" />').hideMenu().focus();
                        e.stop();
                    });
                }

                function createEmoticonsTable(pageNum, parentDiv) {
                    var table = document.createElement('table');
                    parentDiv.append(table);
                    if (previewDiv) {
                        K(table).mouseover(function () {
                            previewDiv.show('block');
                        });
                        K(table).mouseout(function () {
                            previewDiv.hide();
                        });
                        elements.push(K(table));
                    }
                    table.className = 'ke-table';
                    table.cellPadding = 0;
                    table.cellSpacing = 0;
                    table.border = 0;
                    var num = (pageNum - 1) * cells + startNum;
                    for (var i = 0; i < rows; i++) {
                        var row = table.insertRow(i);
                        for (var j = 0; j < cols; j++) {
                            var cell = K(row.insertCell(j));
                            cell.addClass('ke-cell');
                            bindCellEvent(cell, j, num);
                            var span = K('<span class="ke-img"></span>')
                                .css('background-position', '-' + (24 * num) + 'px 0px')
                                .css('background-image', 'url(' + path + 'static.gif)');
                            cell.append(span);
                            elements.push(cell);
                            num++;
                        }
                    }
                    return table;
                }

                var table = createEmoticonsTable(currentPageNum, wrapperDiv);

                function removeEvent() {
                    K.each(elements,
                        function () {
                            this.unbind();
                        });
                }

                var pageDiv;

                function bindPageEvent(el, pageNum) {
                    el.click(function (e) {
                        removeEvent();
                        table.parentNode.removeChild(table);
                        pageDiv.remove();
                        table = createEmoticonsTable(pageNum, wrapperDiv);
                        createPageTable(pageNum);
                        currentPageNum = pageNum;
                        e.stop();
                    });
                }

                function createPageTable(currentPageNum) {
                    pageDiv = K('<div class="ke-page"></div>');
                    wrapperDiv.append(pageDiv);
                    for (var pageNum = 1; pageNum <= pages; pageNum++) {
                        if (currentPageNum !== pageNum) {
                            var a = K('<a href="javascript:;">[' + pageNum + ']</a>');
                            bindPageEvent(a, pageNum);
                            pageDiv.append(a);
                            elements.push(a);
                        } else {
                            pageDiv.append(K('@[' + pageNum + ']'));
                        }
                        pageDiv.append(K('@&nbsp;'));
                    }
                }

                createPageTable(currentPageNum);
            });
    });